<template>
  <div>
    <div style="padding: 10px;padding-bottom: 0;width: 100%">
      <div class="report_header" ref="headerHeight">
        <div style="display: flex;align-items: center">
          <div style="width: 800px;display: flex;align-items: center;">
               <div class="report_header_date">
              <el-date-picker
                style="width: 100%"
                v-model="query.date"
                value-format="yyyy-MM-dd"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </div>
            <div class="report_header_query">
              <el-select value-key="id" :filter-method="loadShop" clearable style="width: 100%;" v-model="query.shopId" filterable placeholder="请选择仓库">
                <el-option
                  v-for="item in shopList"
                  :key="item.id"
                  :label="item.name"
                  :value="JSON.stringify(item.id)"
                />
              </el-select>
            </div>
            <div class="report_header_date">
              <el-select v-model="productName" clearable placeholder="请选择商品"
                         filterable @focus="getProductList" value-key="id" :filter-method="queryProduct"
                         @change="changeProduct" style="width: 100%">
                <el-option v-for="item in productOptions" :key="item.id" :label="item.name" style="width:650px"
                           :value="item">
                  <div style="display: flex">
                    <span style="width: 80px;overflow: hidden;text-overflow: ellipsis;">{{ item.sn }}</span>
                    <span style="float: left;width: 160px;overflow: hidden;text-overflow: ellipsis;margin-left: 10px">{{
                        item.name
                      }}</span>
                    <div style="width: 200px;">
                      <span style="color: #8492a6; font-size: 8px;">{{ item.spec1 }}</span>
                    </div>
                  </div>
                </el-option>
                <div style="display: flex;width: 100%;position: absolute;bottom: 0">
                  <div style="width: 50%;background-color: rgb(248,248,248);"></div>
                  <div class="elOption" @click="toAddProduct">搜索商品</div>
                </div>
                <div style="height: 30px"></div>
              </el-select>
            </div>
          </div>
          <div style="display: flex;flex-direction: row;justify-content: flex-end;width: 100%;">
            <div
              style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;height:41px;justify-content: flex-end;">
            </div>
            <el-button style="margin-left: 10px;margin-top: 7px;height: 100%" size="small" type="primary"
                       @click="queryClick">查询
            </el-button>
            <ExportList2Excel style='margin-left: 10px;margin-top: 5px;' ref="exportList2Excel" @handleExport="handleExport" name="导出" />

          </div>
        </div>
      </div>
    </div>
      <div style="padding:10px">
    <el-table :data="shippingForm" stripe style="width: 100%" border      :height="curHeight">
    <el-table-column  prop="createDate" label="创建日期" width="180">
      <template slot-scope="scope">
        <span>{{ scope.row.createDate | datetimeFormatter}}</span>
      </template>
    </el-table-column>

    <el-table-column prop="orderSn"  label="订单号" width="150">
    </el-table-column>
    <el-table-column prop="name"  label="客户信息" width="180" >
      <template slot-scope="scope">
        <div style="text-align: center;">{{ scope.row.memberName}}</div>
        <div style="text-align: center;">{{ scope.row.memberMobile}}</div>
      </template>
    </el-table-column>
    <el-table-column prop="memberCode"  label="客户编号" width="120" >
    </el-table-column>
    <el-table-column prop="shopName" label="仓库名称"  width="180">
    </el-table-column>
    <el-table-column prop="name" label="商品名称"  width="180">
    </el-table-column>
        <el-table-column  prop="createDate" label="类型" width="80">
      <template slot-scope="scope">
        <span>{{ scope.row.emptyType|warehouseType}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="unit" label="单位"  width="80"></el-table-column>
    <el-table-column prop="quantity" label="数量"></el-table-column>
    <el-table-column prop="memo" label="备注"></el-table-column>
  </el-table>
      </div>
    <el-footer class="el-footerBox" style="height: 0px">
      <pagination :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                  @pagination="loadOrder" style="margin-bottom: auto"></pagination>
    </el-footer>
    <el-dialog
      title="双击选择客户"
      :visible.sync="memberTableVisible"
      width="950px"
      v-el-drag-dialog
      append-to-body
      :before-close="memberTableClose">
      <div style="position: relative;">
        <member-table :key="times" @memberDouble="memberDouble" @memberTableClose="memberTableClose"></member-table>
      </div>
    </el-dialog>
    <el-dialog
      title="查找商品"
      :visible.sync="orderVisible"
      width="950px"
      v-el-drag-dialog
      :before-close="orderClose">
      <div style="position: relative;">
        <productTable ref="productList" @doubleClick="doubleClick" @addClick="addProductClick"></productTable>
      </div>
    </el-dialog>
  </div>


</template>

<script>
import Pagination from '@/components/Pagination'
import memberTable from '@/components/MemberTable/index'
import {list as memberList} from "@/api/member";
import utils from "@/utils/utils";
import shippingList from './components/list'
import productTable from '@/components/ProductList/productList'
import {list as emoloyeeList} from "@/api/sysEmployee";
import elDragDialog from '@/directive/el-drag-dialog'
import loadMore from "@/utils/more";
import permission from "@/directive/permission";
import {emptyBarrel,emptyBarrelshoplist} from "@/api/emptyBarrel";
import {list as productList} from "@/api/product";
import {list as shopList} from "@/api/shop"; // base on element-ui
import ExportList2Excel from '@/components/ExportList2Excel'
export default {
  directives: { elDragDialog },
name: "summaryLst",
  data(){
    return{
      query: {
        date: [],
        memberId: '',
        productId: '',
        shopId:'',
        emoloyeeId: ''
      },
      memberTableVisible:false,
      times:null,
      members:[],
      total:0,
      pageSize:20,
      printing: 5000,
      curHeight: null,
      shopList:[],
      audited:'',
      orderVisible:false,
      productOptions:[],
      pageNum:1,
      shippingForm:[],
      productName:'',
      queryType: false,
      memberName:'',
      emoloyee:[],
      keyword: {
        date: [],
        shopId:'',
        memberId: '',
        productId: '',
        emoloyeeId: ''
      },
      pickerOptions: {//时间快捷选择
        shortcuts: [{
          text: '昨天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
    }
  },
  created() {
    console.log(this.$route.query)
    this.query.shopId=this.$route.query.shopId
    this.loadShop('')
    this.getProductList()
    this.query.productId=Number(this.$route.query.productId)
    if(this.$route.query.productName==''){
      this.productName=this.$route.query.name
    }else{
      this.productName=this.$route.query.productName
    }
    // console.log(his.$route.query.data)
    this.loadOrder()
  },
  methods:{
    handleExport() {
      let _this = this
      var loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      let data = {}
      data.tHeader = ["创建日期","客户名称","客户编号","门店名称", "商品名称","单位","类型", '数量','备注']
      data.filterVal = ["createDate","memberName","memberCode","shopName","name","unit",'emptyType','quantity','memo']
      data.filename = "空桶明细查询";

      if (utils.isNull(this.keyword.date)){
        this.keyword.date = []
      }
      let params = new URLSearchParams()
      params.append('pageNum', _this.pageNum)
      params.append('pageSize', _this.printing)
      params.append('shopId',_this.query.shopId)
      params.append('productId', _this.query.productId)
      params.append('startDate', this.keyword.date.length > 0 ? this.keyword.date[0] : '')
      params.append('endDate', this.keyword.date.length > 0 ? this.keyword.date[1] : '')
      emptyBarrelshoplist(params).then(res => {
        data.list = res.data.data
        res.data.data.forEach(item => {
          if (item.emptyType != null) {
            item.emptyType = this.emptyType(item.emptyType)
          }
          if (item.createDate != null) {
            item.createDate = utils.dateFormatter(item.createDate)
          }
        })
        _this.$refs.exportList2Excel.handleDownload(data);
        loading.close();

        if(data.list.length==this.printing){
          this.pageNum++
          console.log(this.pageNum);
          this.handleExport()
        }
        else{
          return;
        }
      }).catch(error => {
        _this.$refs.exportList2Excel.unlockLoading()
        loading.close();
        console.log('error!!')
      })
    },
    queryClick() {
      this.keyword = this.query
      this.pageNum = 1

      this.loadOrder()
    },
    loadShop(query) {
      let params = new URLSearchParams()
      params.append('pageSize',100)
      params.append('name', query)
      shopList(params).then(res => {
        this.shopList = res.data.data
      })
    },
    loadOrder() {
      var _this = this
      if (utils.isNull(this.keyword.date)){
        this.keyword.date = []
      }
      let params = new URLSearchParams()
      params.append('pageNum', _this.pageNum)
      params.append('pageSize', _this.pageSize)
      params.append('shopId',_this.query.shopId)
      params.append('productId', _this.query.productId)
      params.append('startDate', this.keyword.date.length > 0 ? this.keyword.date[0] : '')
      params.append('endDate', this.keyword.date.length > 0 ? this.keyword.date[1] : '')
      emptyBarrelshoplist(params).then(response => {
        console.log(response)
        _this.shippingForm = response.data.data
        _this.total = response.data.total
      }).catch(error => {
        console.log('error!!')
      })
    },
    queryProduct(query) { // 查询商品
      this.productOptions = []
      productList({ name: query }).then(res => {
        res.data.data.forEach((option, index) => {

          this.$set(this.productOptions, index, option)
        })
      }).catch(err => {
        console.log(err)
      })
    },
    toAddProduct() {
      this.orderVisible = true
    },
    addProductClick(data) {
      if (data.length > 1) {
        this.productName = data[0].name
        this.query.productId = data[0].id
        this.orderVisible = false
        this.$message({
          message: '只能查询一个商品',
          offset: 120,
          center: true
        })
      } else {
        this.productName = data[0].name
        this.query.productId = data[0].id
      }
    },
    doubleClick(val) {
      this.productName = val.name
      this.query.productId = val.id
      this.orderVisible = false
    },
    orderClose() {
      this.orderVisible = false

    },
    beforeMount() {
      var _this = this
      window.onresize = () => {
        return (() => {
          if (_this.queryType == true) {
            var h = document.documentElement.clientHeight || document.body.clientHeight
            this.curHeight = h - 311//减去页面上固定高度height
            this.tabsHeight = h - 381
          } else {
            var h = document.documentElement.clientHeight || document.body.clientHeight
            _this.curHeight = h - 224//减去页面上固定高度height
            this.tabsHeight = h - 294
          }
        })()
      }
    },
    comeIn() {
      console.log('222')
      var h = document.documentElement.clientHeight || document.body.clientHeight
      this.curHeight = h - 224//减去页面上固定高度height
      this.tabsHeight = h - 294
    },
    // chooseClick() {
    //   this.queryType = !this.queryType
    //   if (this.queryType == true) {
    //     var h = document.documentElement.clientHeight || document.body.clientHeight
    //     this.curHeight = h - 265//减去页面上固定高度height
    //     this.tabsHeight = h - 334
    //   } else {
    //     var h = document.documentElement.clientHeight || document.body.clientHeight
    //     this.curHeight = h - 224//减去页面上固定高度height
    //     this.tabsHeight = h - 294
    //   }
    // },
    getProductList() { // 加载商品
      productList().then(res => {
        console.log('3.261.3133535555555');
        console.log(res);
        res.data.data.forEach((option, index) => {

          this.$set(this.productOptions, index, option)
        })
      }).catch(err => {
        console.log(err)
      })
    },
    changeProduct(data) {
      if (!utils.isNull(data)){
        this.productName = data.name
        this.query.productId = data.id
      }else {
        this.query.productId = ''
      }

    },
    memberDouble(data) {
      this.memberName = data.name
      this.query.memberId = data.id
      this.memberTableVisible = false
    },
    memberTableClose() {
      this.memberTableVisible = false
    },
    selectMember(data) {
      if (!utils.isNull(data)){
        this.memberName = data.name
        this.query.memberId = data.id
      }else {
        this.query.memberId = ''
      }

    },
    toSearchMember() {
      this.times = new Date().getSeconds()
      this.memberTableVisible = true
    },
    queryEmployee(query) {
      this.getEmployeeList(query)
    },
    getEmployeeList(query) {
      let param = new URLSearchParams()
      param.append('name', query)
      emoloyeeList(param).then(res => {
        console.log(res)
        console.log('送货员')
        this.emoloyee = res.data.data
      })
    },
    queryMember(query) {
      this.getMemberList(query)
    },
    getMemberList(query) {
      let param = new URLSearchParams()
      param.append('keyword', query)
      memberList(param).then(res => {
        this.members = res.data.data
      })
    },
    emptyType(val) {
      if (val == 0) {
        return '入库'
      } else if (val == 1) {
        return '销售'
      } else if (val == 2) {
        return '退桶'
      } else if (val == 3) {
        return '出库'
      }
    },
  },
  mounted() {

    this.comeIn()
    this.beforeMount()
  },
  components:{
    memberTable,productTable,shippingList,Pagination,ExportList2Excel
  },
   filters: {
      watchShippingMethod(val){
        if (val == 0) {
          return '普通快递'
        } else if (val == 1) {
          return '到店提货'
        } else if (val == 2) {
          return '同城快送'
        }
      },
      warehouseType(val) {
        if (val == 0) {
          return '入库'
        } else if (val == 1) {
          return '销售'
        } else if (val == 2) {
          return '退桶'
        } else if (val == 3) {
          return '出库'
        }
      },
      status(val) {
        if (val == 0) {
          return '未确认'
        } else if (val == 1) {
          return '已派单'
        } else if (val == 2) {
          return '已发货'
        } else if (val == 3) {
          return '已送达'
        } else if (val == 4) {
          return '已完成'
        } else if (val == 5) {
          return '已关闭'
        }
      }
    },
}
</script>

<style scoped>
.details_card {
  overflow: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  border: 1px solid #f2f2f2;
  border-radius: 4px;
}

.details_card:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.elOption {
  background-color: #909399;
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 40px
}

.el-input__inner {
  width: 100% !important;
}

.app {
  background-color: rgba(248, 248, 248, 0.8);
}

/deep/ .el-header {
  padding: 10px;
  /* height: 100% !important; */
  padding-bottom: 0;
}

.report_header {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  background-color: rgba(248, 248, 248, 0.8);
  display: flex;
  padding-bottom: 5px;
  position: relative;
  padding-left: 5px;
  padding-right: 5px;
  flex-direction: column;
}

.report_header_left {
  width: 5px;
  height: 46px;
  background-color: #409EFF;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.report_header_query {
  margin-left: 10px;
  width: 180px;
  margin-top: 5px;
}

.report_header_date {
  margin-left: 10px;
  width: 250px;
  margin-top: 5px;
}
</style>
